<script setup lang="ts">
import type { PageManager, PageSchema } from 'epic-designer';

import { defineEmits, onMounted, onUnmounted, ref } from 'vue';

import { EDesigner } from 'epic-designer';
import { setupAntd } from 'epic-designer/dist/ui/antd';

import { emitter } from '#/views/workflow/formDefinition/mitt';

const emit = defineEmits('saveSchema');
// 表单设计器使用Antd UI
setupAntd();
const formSchema = ref<PageSchema>(null);
const pageManager = ref<PageManager>(null);
function handleReady(pageSchema: PageSchema) {
  pageManager.value = pageSchema.pageManager;
  if (formSchema.value) {
    pageManager.value.setPageSchema(formSchema.value);
  }
}

function saveSchema(pageSchema: PageSchema) {
  console.log('<UNK>=>', pageSchema);
  emit('saveSchema', pageManager.value.pageSchema);
}

defineExpose({
  saveSchema,
});

onMounted(() =>
  emitter.on('formSchema', (data) => {
    console.log('data=>', data);
    // 监听事件并处理数据
    formSchema.value = data;
  }),
);

onUnmounted(() => emitter.off('formSchema'));
</script>
<template>
  <div class="designer-page-height">
    <EDesigner
      :hidden-header="true"
      :form-mode="true"
      :hide-preview-confirm="true"
      @ready="handleReady"
      @save="saveSchema"
    />
  </div>
</template>
<style lang="scss">
@import 'epic-designer/dist/style.css';
// 重置Modal的边距
.z-popup > :nth-child(2) {
  padding: 0;
}
// 表单设计器高度
.designer-page-height {
  height: calc(100vh - 143px);
  // 头部
  .epic-header-container {
    border: 0;
  }
  // 左侧边栏
  .epic-component-view > :nth-child(2) {
    display: flex;
    flex-direction: column;
  }
  // 左侧边栏 选项卡
  .epic-component-view .epic-tabs-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: inherit;
    height: auto;
    padding: 5px 10px;

    .epic-tab {
      width: 33.33%;
      margin-bottom: 0;
    }
  }
  // 编辑区上方工具栏
  .epic-edit-toolbar {
    justify-content: flex-start;

    > :nth-child(1) > :nth-child(-n + 2) {
      display: none;
    }
  }
  // 编辑区域
  #canvas-container .epic-edit-range {
    border-radius: 5px;
    box-shadow: 0 0 0 10px black;

    .box-border {
      border-radius: 20px;
    }

    .form-main > form {
      height: auto !important;
      padding: 10px !important;
    }
  }
  // 右侧边栏
  .epic-right-sidebar {
    overflow-y: hidden;
    border-right: 0;

    .epic-breadcrumb {
      z-index: 99;
      width: inherit;
      padding-right: 16px;
    }

    .epic-actions-container {
      z-index: 98;
      display: flex;
      width: inherit;
    }

    .epic-sidebar-content {
      height: calc(100vh - 170px);
      overflow-y: auto;
    }
  }
}
</style>
